<template>
  <div>
    <el-row style="margin-bottom: 20px">
      <el-col :span="8">
        <el-form-item label="产品：">
          <el-select v-model="product.checkedProduct" placeholder="选择产品">
            <el-option
              v-for="(item, index) in products"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span class="product-name">美复胶丸 24粒/盒</span>
        </el-form-item>
      </el-col>
      <el-col :span="14">
        <el-form-item label="协议有效期:">
          <el-date-picker
            v-model="product.termOfAgreement"
            type="daterange"
            range-separator="～"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="2" class="change-delBtn-color">
        <el-button style="float: right" @click="remove()">删除</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table class="gray-input-table" :data="[{}]">
        <el-table-column label="协议价（元）">
          <template>
            <el-input placeholder="请输入" v-model="product.agreementPrice"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="票折（元）">
          <template>
            <el-input placeholder="请输入" v-model="product.ticketDiscountPrice"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="购进指标量（大单位）">
          <template>
            <el-input placeholder="请输入" v-model="product.purchaseIndexScalarBig"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="购进指标量（小单位）">
          <template>
            <el-input placeholder="请输入" v-model="product.purchaseIndexScalarSmall"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="购进金额（万元）">
          <template>
            <el-input placeholder="请输入" v-model="product.purchaseMoney"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="纯销指标量（小单位）">
          <template>
            <el-input placeholder="请输入" v-model="product.saleScalarSmall"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="纯销指标金额（万元）">
          <template>
            <el-input placeholder="请输入" v-model="product.saleScalarMoney"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-table class="gray-input-table" :data="[{}]">
        <el-table-column label="分销奖励">
          <template>
            <el-input placeholder="请输入" v-model="product.distributionIncentives"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="费用科目">
          <template>
            <el-select v-model="product.distributionIncentivesCost" placeholder="请选择">
              <el-option
                v-for="item in distributionIncentivesCostOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="零售配送">
          <template>
            <el-input placeholder="请输入" v-model="product.retailDistribution"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="费用科目">
          <template>
            <el-select v-model="product.retailDistributionCost" multiple placeholder="请选择">
              <el-option
                v-for="item in retailDistributionCostOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="医疗配送商">
          <template>
            <el-input placeholder="请输入" v-model="product.medicalDistributor"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="费用科目">
          <template>
            <el-select v-model="product.medicalDistributorCost" multiple placeholder="请选择">
              <el-option
                v-for="item in medicalDistributorCostOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="自定义7">
          <template>
            <el-date-picker v-model="product.customOne" type="date" placeholder="选择日期"></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="自定义8">
          <template>
            <el-date-picker v-model="product.customTwo" type="date" placeholder="选择日期"></el-date-picker>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'ProductItem',
  props: {
    value: Object,
  },
  data() {
    return {
      product: this.value,
      products: [
        {
          value: 0,
          label: '111',
        },
        {
          value: 1,
          label: '222',
        },
      ],

      distributionIncentivesCostOptions: [
        {
          value: 0,
          label: '111',
        },
      ],
      retailDistributionCostOptions: [
        {
          value: 0,
          label: '111',
        },
      ],
      medicalDistributorCostOptions: [
        {
          value: 0,
          label: '111',
        },
      ],
    };
  },
  watch: {
    value() {
      this.product = this.value;
    },
  },
  methods: {
    /**
     * 删除产品
     */
    remove() {
      this.$confirm('是否删除选中数据？', '提示', {
        confirmButtonText: '确定',
        closeOnClickModal: false,
        type: 'warning',
      })
        .then(() => {
          this.$emit('remove');
        })
        .catch(() => {});
    },
  },
};
</script>
<style>
.gray-input-table .el-input__inner {
  background: #f8f8f8 !important;
}
.gray-input-table td {
  border-bottom: none !important;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: auto !important;
}
.product-policy-wrapper .el-form-item__content {
  line-height: 0 !important;
}
.gray-input-table {
  border: 1px solid #ebebeb;
  margin-bottom: 20px;
}
.product-name {
  margin-left: 10px;
  color: #4e8bfe;
}
.add-product {
  display: flex;
  align-items: center;
  color: #333;
  padding-bottom: 15px;
}
.product-desc {
  display: flex;
  justify-content: space-between;
  padding: 0 10px 10px;
  border: 1px solid #ebebeb;
}
.product-desc div {
  display: flex;
  flex-direction: column;
}
.product-desc div p {
  line-height: 28px;
  color: #656565;
  font-size: 14px;
  font-weight: 600;
  background: #f8f8f8;
  border-bottom: 1px solid #ebebeb;
}
</style>
